<template>
	<view class="user" :style="[background]">
		<view class="top_nav_bar" :style="'zIndex:999;top:'+ menuButtonInfo.pos_top_height +'px'">
					<view class="float_bar"><float-cart-search></float-cart-search></view>
				</view>
		<loading-view v-if="isFirstLoading"></loading-view>
		<view class="view_body" :style="'top:'+ menuButtonInfo.pos_logo_top_height +'px'">
			<view class="header">
				<view class="hd-wrap bg-white">
					<view class="user-info flex row-between">
						<router-link to="/bundle/pages/user_profile/user_profile">
							<view class="info flex">
								<image class="avatar m-r-20 flex-none"
									:src="isLogin ? userInfo.avatar : '/static/images/portrait_empty.png'" />
								<view v-if="isLogin">
									<view class="name flex">
										<view class="xxl bold line-2">{{userInfo.nickname}}</view>
										<view class="level br60 m-l-10 flex-none flex" v-if="userInfo.vip">
											<!-- <text class="m-r-10">
												<text class="v xxl m-r-4">v</text>
												<text class="xxs">{{userInfo.vip}}</text>
											</text>
											<text class="xxs">{{userInfo.level_name}}</text> -->
										</view>
									</view>
									<view class="flex m-t-10" v-if="userInfo.sn">
										<view class="user-id xs m-r-20">会员ID: {{userInfo.sn}}</view>
										<view class="xs primary row-center m-l-5" @tap.stop="onCopy">复制</view>
									</view>
								</view>
								<view v-else>
									<view style="font-size: 42rpx">点击登录</view>
									<view class="sm m-t-10 lighter">登录体验更多功能</view>
								</view>
							</view>
						</router-link>
						<view class="flex m-l-20">
							<router-link to="/bundle/pages/user_profile/user_profile">
								<view class="user-opt">
									<image style="width:58rpx;height: 58rpx;" :src="imgUrl + '/static/images/icon_my_setting.png'">
									</image>
								</view>
							</router-link>
						</view>
					</view>
					<!-- <view class="user-assets flex m-t-20 m-b-20">
						<router-link class="user-assests-item" to="/bundle/pages/user_wallet/user_wallet">
							<view class="flex-col col-center">
								<view class="xl primary">
									{{userInfo.user_money || 0}}
								</view>
								<view class="sm m-t-10">
									余额
								</view>
							</view>
						</router-link>
						<router-link class="user-assests-item" to="/bundle/pages/user_collection/user_collection">
							<view class="flex-col col-center">
								<view class="xl primary">
									{{userInfo.collect || 0}}
								</view>
								<view class="sm m-t-10">
									收藏
								</view>
							</view>
						</router-link>
						<router-link class="user-assests-item" to="/bundle/pages/user_coupon/user_coupon">
							<view class="flex-col col-center">
								<view class="xl primary">
									{{userInfo.coupon || 0}}
								</view>
								<view class="sm m-t-10">
									优惠券
								</view>
							</view>
						</router-link>
					</view> -->
				</view>
			</view>
			
			<view class="order-nav bg-white box-shadow">
				<router-link to="/bundle/pages/user_order/user_order">
					<view class="title flex row-between">
						<view class="lg">我的订单</view>
						<view class="muted sm row">
							<u-icon name="arrow-right" size="28rpx" />
						</view>
					</view>
				</router-link>
				<view class="nav flex">
					<router-link class="item" :to="{path: '/bundle/pages/user_order/user_order',query:{type: 'pay'}}">
						<view class="flex-col col-center m-b-20">
							<view class="icon-contain">
								<view v-if="userInfo.wait_pay" class="badge xs flex row-center bg-white">
									{{userInfo.wait_pay}}
								</view>
								<image class="nav-icon" :src="imgUrl + '/static/images/icon_my_payment.png'"></image>
							</view>
							<view class="sm m-t-10">待付款</view>
						</view>
					</router-link>
					<router-link class="item" to="/bundle/pages/user_order/user_order?type=delivery">
						<view class="flex-col col-center m-b-20">
							<view class="icon-contain">
								<view v-if="userInfo.wait_delivery" class="badge xs flex row-center bg-white">
									{{userInfo.wait_delivery}}
								</view>
								<image class="nav-icon m-b-10" :src="imgUrl + '/static/images/icon_my_fahuo.png'"></image>
							</view>
							<view class="sm">待发货</view>
						</view>
					</router-link>
					<router-link class="item" to="/bundle/pages/user_order/user_order?type=delivery">
						<view class="flex-col col-center m-b-20">
							<view class="icon-contain">
								<view v-if="userInfo.wait_take" class="badge xs flex row-center bg-white">
									{{userInfo.wait_take}}
								</view>
								<image class="nav-icon" :src="imgUrl + '/static/images/icon_my_shouhuo.png'"></image>
							</view>
							<view class="sm m-t-10">待收货</view>
						</view>
					</router-link>
					<router-link class="item" to="/bundle/pages/user_comment/user_comment">
						<view class="flex-col col-center m-b-20">
							<view class="icon-contain">
								<view v-if="userInfo.wait_comment" class="badge xs flex row-center bg-white">
									{{userInfo.wait_comment}}
								</view>
								<image class="nav-icon" :src="imgUrl + '/static/images/icon_my_pingjia.png'"></image>
							</view>
							<view class="sm m-t-10">商品评价</view>
						</view>
					</router-link>
					<router-link class="item" to="/bundle/pages/after_sales/after_sales">
						<view class="flex-col col-center m-b-20">
							<view class="icon-contain">
								<view v-if="userInfo.after_sale" class="badge xs flex row-center bg-white">
									{{userInfo.after_sale}}
								</view>
								<image class="nav-icon" :src="imgUrl + '/static/images/icon_my_shouhou.png'"></image>
							</view>
							<view class="sm m-t-10">退款/售后</view>
						</view>
					</router-link>
				</view>
			</view>
			
			<view  v-if="vipStateCode == 2">
			<view class="order-nav bg-white">
				<view class="user-assets-box">
					
						<view class="user-assets-header flex row-between">
							<view class="lg">我的店铺</view>
							<router-link to="/bundle/pages/user_spread/user_spread" class="muted sm row">
								<u-icon name="arrow-right" size="28rpx" />
							</router-link>
						</view>
					
					<view class="user-assets-content flex  flex-wrap" @click="goUserOrder">
						<view class="user-item flex-col col-center">
							<tool-tip v-if="false" class="m-t-20" id="today-profit" content="今日预估结算金额"
								style="position: absolute;right: -66rpx;"></tool-tip>
							<view class="nr user-assets-name flex" style="color: #333333">
								今日支付订单数
								<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
							</view>
							<view class="assets m-l-20">
								<text class="xxl primary bold">{{distributionInfo.myshop_today.today_order_num}}</text>
							</view>
						</view>
						<view class="user-item flex-col col-center">
							<view class="nr user-assets-name flex" style="color: #333333">
								今日支付金额
								<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
							</view>
							<view class="assets m-l-20">
								<price-format weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
									:price="distributionInfo.myshop_today.today_total_price" :color="colorConfig.primary" />
							</view>
						</view>
						<view class="user-item flex-col col-center">
							<view class="nr user-assets-name flex" style="color: #333333">
								今日预估结算
								<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
							</view>
							<view class="assets">
								<price-format weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
									:price="distributionInfo.myshop_today.today_earnings" :color="colorConfig.primary" />
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="order-nav bg-white" v-show="isShowTeam">
				<view class="user-assets-box">
					<view class="user-assets-header flex row-between">
						<view class="lg">我的分销商</view>
						<router-link to="/bundle/pages/user_fans/user_fans" class="muted sm row">
							<u-icon name="arrow-right" size="28rpx" />
						</router-link>
					</view>
					<view class="user-assets-content flex  flex-wrap" @click="goTeamOrder">
						<view class="user-item flex-col col-center">
							<tool-tip v-if="false" class="m-t-20" id="today-profit" content="今日预估结算金额"
								style="position: absolute;right: -66rpx;"></tool-tip>
								
							<view class="nr user-assets-name flex" style="color: #333333">
								今日分销单数
								<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
							</view>
							<view class="assets m-l-20">
								<text class="xxl primary bold">{{distributionInfo.team_sale_info.today_order_num}}</text>
							</view>
						</view>
						<view class="user-item flex-col col-center">
							<view class="nr user-assets-name flex" style="color: #333333">
								今日分销总额
								<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
							</view>
							<view class="assets m-l-20">
								<price-format weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
									:price="distributionInfo.team_sale_info.today_total_price" :color="colorConfig.primary" />
							</view>
						</view>
						<view class="user-item flex-col col-center">
							<view class="nr user-assets-name flex" style="color: #333333">
								今日分销预估结算
								<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
							</view>
							<view class="assets m-l-20">
								<price-format weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
									:price="distributionInfo.team_sale_info.today_earnings" :color="colorConfig.primary" />
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="order-nav bg-white">
				<view class="user-assets-box">
					<view class="user-assets-header flex row-between">
						<view class="lg">我的结算金额</view>
						<view class="flex row-center" :class="earningsBtn" @click="goEarnings">
							<text class="white sm">立即提现</text>
						</view>
					</view>
					<view class="user-assets-content flex  flex-wrap" @click="goCommissionDetails">
						<view class="user-item flex-col col-center">
							<tool-tip v-if="false" class="m-t-20" id="today-profit" content="今日预估结算金额"
								style="position: absolute;right: -66rpx;"></tool-tip>
							<view class="nr user-assets-name flex" style="color: #333333">
								可结算
								<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
							</view>
							<view class="assets m-l-20">
								<price-format weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
									:price="distributionInfo.my_earnings.able_withdrawal" :color="colorConfig.primary" />
							</view>
						</view>
						<view class="user-item flex-col col-center">
							<view class="nr user-assets-name flex" style="color: #333333">
								累计结算
								<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
							</view>
							<view class="assets m-l-20">
								<price-format weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
									:price="distributionInfo.my_earnings.history_earnings" :color="colorConfig.primary" />
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="order-nav bg-white">
				<router-link to="/bundle/pages/user_spread/user_spread">
					<view class="title flex row-between">
						<view class="lg">我的店铺</view>
						<view class="muted sm row">
							查看详情
							<u-icon name="arrow-right" size="28rpx" />
						</view>
					</view>
				</router-link>
				<view class="nav flex">
					<router-link class="item" to="/bundle/pages/user_spread_order/user_spread_order">
						<view class="flex-col col-center m-b-20">
							<view class="icon-contain">
								<image class="nav-icon" :src="imgUrl + '/static/images/icon_fenxiao.png'"></image>
							</view>
							<view class="sm m-t-10">分销订单</view>
						</view>
					</router-link>
					<router-link class="item" to="/bundle/pages/commission_details/commission_details">
						<view class="flex-col col-center m-b-20">
							<view class="icon-contain">
								<image class="nav-icon m-b-10" :src="imgUrl + '/static/images/icon_yongjin.png'"></image>
							</view>
							<view class="sm">佣金明细</view>
						</view>
					</router-link>
					<router-link class="item" to="/bundle/pages/monthly_bill/monthly_bill">
						<view class="flex-col col-center m-b-20">
							<view class="icon-contain">
								<image class="nav-icon" :src="imgUrl + '/static/images/icon_zhangdan.png'"></image>
							</view>
							<view class="sm m-t-10">月度账单</view>
						</view>
					</router-link>
					<router-link class="item" to="/bundle/pages/shop_revise/shop_revise">
						<view class="flex-col col-center m-b-20">
							<view class="icon-contain">
								<image class="nav-icon" :src="imgUrl + '/static/images/shezhi.png'"></image>
							</view>
							<view class="sm m-t-10">店铺设置</view>
						</view>
					</router-link>
				</view>
			</view> -->
			</view>
			<view class="server-nav bg-white" v-if="menuList && menuList.length > 0">
				<view>
					<view class="title flex row-between">
						<view class="lg">更多</view>
					</view>
				</view>
				<view class="nav flex flex-wrap">
					<view v-for="(item, index) in menuList" :key="index" class="item flex-col col-center m-b-30"
						style="width: 25%;" @tap="menuJump(item,serviceData)">
						<image class="nav-icon" :src="item.image"></image>
						<view class="sm m-t-10">{{item.name}}</view>
					</view>
				</view>
			</view>
			
			<!-- <goods-column ref="mescrollItem"></goods-column> -->
		</view>
		<view style="height: 50rpx;"></view>
		
		<tabbar></tabbar>
	</view>
</template>

<script>
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		bindSuperior,
		applyDistribute,
		applyDetail,
		getSuperiorInfo,
		getDistribution,
		veryfiyDistribute,
		getSettingService
	} from "@/api/user";
	import {
		getMenu
	} from '@/api/store'
	import {
		toLogin
	} from '@/utils/login'
	import {
		menuJump,
		copy
	} from '@/utils/tools'
	import Cache from '@/utils/cache'
	const app = getApp()
	export default {
		mixins: [MescrollCompMixin],
		data() {
			return {
				isFirstLoading:true,
				menuButtonInfo: {},
				showNav: false,
				navBg: 0,
				vipStateCode: 0,
				menuList: [],
				distributionInfo: {},
				serviceData:{},
				imgUrl:`${this.$imgUrl}/wechat`
			};
		},

		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.getMenuButtonInfo()
			// #endif
			this.getMenuFun();
			this.getSettingServiceFun()
			
		},

		onShow() {
			this.getUser();
			this.getCartNum()
			this.veryfiyDistributeFun()
			console.log('=this.userInfo==')
			console.log(this.userInfo)
		},

		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			let percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.navBg = percent
		},
		onPullDownRefresh() {
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
			})
			this.getMenuFun();
		},
		methods: {
			...mapActions(['getCartNum', 'getUser']),
			getMenuButtonInfo() {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.menuButtonInfo.pos_top_height =  this.menuButtonInfo.top;
				this.menuButtonInfo.pos_logo_top_height =  this.menuButtonInfo.pos_top_height + 30;
				console.log('=====getMenuButtonInfo====this.menuButtonInfo========', this.menuButtonInfo)
			},
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					uni.navigateTo({
						url: '/pages/index/index'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			async getSettingServiceFun(){
				const {
					code,
					data
				} = await getSettingService()
				this.isFirstLoading = false;
				if (code==1) {
					Cache.set("SERVICE",data)
					this.serviceData=data
				}
			},
			goEarnings(){
				if (this.earningsBtn=='primary-btn') {
					uni.navigateTo({
						url: 'bundle/pages/user_withdraw/user_withdraw'
					});
				} else{
					this.$toast({
						title: "暂不可提现，更多详情，请查看帮助中心-提现规则"
					});
				}
			},
			goCommissionDetails(){
				uni.navigateTo({
					url:'/bundle/pages/commission_details/commission_details'
				})
			},
			goUserOrder(){
				uni.navigateTo({
					url: "bundle/pages/user_spread_order/user_spread_order?level=1&date='today'"
				});
			},
			goTeamOrder(){
				uni.navigateTo({
					url: "bundle/pages/user_spread_order/user_spread_order?level=2&date='today'"
				});
			},
			async getDistributionFun() {
				const {
					data,
					code
				} = await getDistribution()
				if (code == 1) {
					this.showLoading = false
					this.distributionInfo = data
				}
			},
			
			veryfiyDistributeFun() {
				veryfiyDistribute().then(res => {
					if (res.code == 10001) {
						// 分销会员
						this.vipStateCode = 2
						this.getDistributionFun()
					} else  {
						// 非分销会员
						this.vipStateCode = 0;
						//this.applyDetailFun()
					} 
				})
			},

			goPage(url) {
				if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				});
			},
			async getMenuFun() {
				const {
					data,
					code
				} = await getMenu({
					type: 2,
				})
				this.isFirstLoading = false;
				if (code == 1) {
					this.menuList = data
				}
			},
			onCopy(e) {
				copy(this.userInfo.sn)
			},
			menuJump(item,serviceData) {
				menuJump(item,serviceData)
			}
		},
		computed: {
			...mapGetters(["userInfo", "inviteCode", 'appConfig','distribution']),
			background() {
				const {
					center_setting
				} = this.appConfig
				return center_setting.top_bg_image ? {
					'background-image': `url(${center_setting.top_bg_image})`,
					'background-repeat': `no-repeat`,
				} : {}
			},
			isShowTeam(){
				if(this.appConfig.distribution.level == 2){
					return this.appConfig.invite.invite_appoint_user.includes(this.distribution.level_id)
				}
				return false;
			},
			earningsBtn(){
				return this.distributionInfo.my_earnings&&this.distributionInfo.my_earnings.is_able_withdrawal?'primary-btn':'disable-btn'
			},
		}
	};
</script>
<style lang="scss" scoped>
page {
	height: 100%;
	padding: 0;
	background-color: $u-bg-color;
}
.view_body{
	position: relative;
}
	.top_nav_bar{
		position: fixed;
		z-index: 999;
		display: flex;
		flex-direction: row;
		justify-content: center;
		.float_bar{
			margin-left: 20rpx;
			// border: $-color-border solid 2rpx;
			border-radius: 30rpx;
		}
		.logo_text{
			width: 240rpx;
			margin-left: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.user {
		background-color: $u-bg-color;
		margin-bottom: 60rpx;

		.header {
			position: relative;
			margin: 0 20rpx;
			padding-top: 20rpx;

			.hd-wrap {
				padding-bottom: 20rpx;
				border-radius: 20rpx;
			}

			.user-info {
				padding: 30rpx;

				.avatar {
					height: 110rpx;
					width: 110rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.name {
					text-align: left;
					margin-bottom: 5rpx;
				}

				.user-id {
					border: $-solid-border;
					border-radius: 100rpx;
					padding: 2rpx 15rpx;
				}

				.user-opt {
					position: relative;

					.dot {
						position: absolute;
						background-color: #ee0a24;
						border: 2rpx solid #FFFFFF;
						color: $-color-primary;
						border-radius: 100%;
						top: 6rpx;
						right: 0rpx;
						font-size: 22rpx;
						min-width: 16rpx;
						height: 16rpx;
					}
				}

				.level {
					background: #333;
					padding: 0 15rpx;
					color: #ffdea5;
					line-height: 40rpx;

					.v {
						font-style: italic;
					}
				}
			}

			.user-assets {
				flex: 1;

				.user-assests-item {
					flex: 1;
				}
			}

		}
		.box-shadow{
			//平偏移、垂直偏移、模糊半径、扩展半径（可选）和颜色。
			 box-shadow: 2px 6px 3px rgba(0, 0, 0, 0.1);
		}

		.order-nav {
			padding: 10rpx;
			.icon-contain {
				position: relative;
			}
		}

		.order-nav,
		.my-assets {
			margin: 20rpx 20rpx 0;
			border-radius: 8rpx;
		}

		.server-nav {
			margin: 20rpx;
			border-radius: 8rpx;
		}

		.title {
			height: 88rpx;
			padding: 0 30rpx;
			// border-bottom: $-solid-border;
		}
		.user-assets-box {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 0 0 20rpx;
			background: #fff;
			
			.user-assets-header {
				// border-bottom: $-solid-border;
				height: 88rpx;
				padding: 0 30rpx;
		
				.primary-btn {
					height: 54rpx;
					border-radius: 120rpx;
					width: 144rpx;
					background: $-color-primary;
				}
				.disable-btn{
					height: 54rpx;
					border-radius: 120rpx;
					width: 144rpx;
					background:#d7d7d7;
				}
			}
		
			.user-assets-content {
				margin-top: 30rpx;
		
				.user-item {
					flex: 1;
					position: relative;
		
					.user-assets-name {
						text-align: center;
						
					}
		
					.assets {
						margin-top: 14rpx;
						text-align: center;
						
					}
				}
			}
		}
		.nav {
			padding: 26rpx 2rpx;

			.assets-item {
				flex: 1;
			}

			.item {
				width: 25%;
			}

			.badge {
				padding: 0 6rpx;
				min-width: 28rpx;
				height: 28rpx;
				border-radius: 28rpx;
				box-sizing: border-box;
				border: 1rpx solid $-color-primary;
				color: $-color-primary;
				position: absolute;
				left: 33rpx;
				top: -10rpx;
				z-index: 2;
			}

			.nav-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
</style>
